<template>
  <div class="dateManage">
    <el-calendar v-model="dateVal">
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{ date, data }">
        <div class="dateItem" @click="handleDateClick(date, data)" :class="{
          has:
            dataMap[data.day] &&
            (dataMap[data.day].raceList.length > 0 ||
              dataMap[data.day].trainList.length > 0),
        }">
          <div class="date">{{ data.day }}</div>
          <div class="race" v-if="dataMap[data.day] && dataMap[data.day].raceList.length > 0" >
            <div class="raceContent" v-if="dataMap[data.day].raceList.length > 0">
              比赛名称：{{ dataMap[data.day].raceList[0].name }}
            </div>
          </div>
          <div class="train" v-if="dataMap[data.day] && dataMap[data.day].trainList.length > 0">
            <div class="trainContent" v-if="dataMap[data.day].trainList.length > 0">
              训练名称：{{ dataMap[data.day].trainList[0].name }}
            </div>
          </div>
        </div>
      </template>
    </el-calendar>
    <dateDialog :dateDialogShow.sync="dateDialogShow" v-if="dateDialogShow" :curInfo="curInfo"></dateDialog>
  </div>
</template>

<script>
import dateDialog from "./components/dateDialog.vue";
import { getDateMap } from "@/api/dateManage"
export default {
  components: {
    dateDialog,
  },
  watch: {
    dateVal(oldVal, newVal) {
      console.log(oldVal, newVal, '9897');
      const oldMonth = oldVal.getMonth() + 1;
      const newMonth = newVal.getMonth()+1

      const oldYear = oldVal.getFullYear();
      const newYear = newVal.getFullYear();
      console.log(oldMonth, newMonth, '9897');

      this.year = newYear;
      this.month = oldMonth;
      console.log('新的', this.year, this.month);

      if (oldMonth !== newMonth) {
        this.getDateData()
      }
    }
  },
  data() {
    return {
      year: "",
      month: "",
      dateVal: new Date(),
      dateDialogShow: false,
      curInfo: {},
      dataMap: {
        "2024-12-03": {
          raceList: [
            {
              id: "123",
              name: "2024级新生杯",
              area: "篮球场",
              time: "2024-12-03 18:00",
              userList: [
                {
                  name: "张三",
                  id: "1",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
              ],
              refereeList: [
                {
                  name: "裁判1",
                  id: "1",
                },
                {
                  name: "裁判2",
                  id: "2",
                },
              ],
            },
            {
              id: "12348",
              name: "2024级新生杯",
              area: "篮球场",
              time: "2024-12-03 18:00",
              userList: [
                {
                  name: "张三",
                  id: "1",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
              ],
              refereeList: [
                {
                  name: "裁判1",
                  id: "1",
                },
                {
                  name: "裁判2",
                  id: "2",
                },
              ],
            },
          ],
          trainList: [
            {
              id: "1234",
              name: "2024级新生杯",
              area: "篮球场",
              time: "2024-12-03 18:00",
              content: "魔鬼训练",
            },
            {
              id: "12345",
              name: "2024级新生杯",
              area: "篮球场",
              time: "2024-12-03 18:00",
              content: "",
            },
          ],
        },
        "2024-12-04": {
          raceList: [
            {
              id: "123",
              name: "2024级新生杯",
              area: "篮球场",
              time: "2024-12-03 18:00",
              userList: [
                {
                  name: "张三",
                  id: "1",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
              ],
              refereeList: [
                {
                  name: "裁判1",
                  id: "1",
                },
                {
                  name: "裁判2",
                  id: "2",
                },
              ],
            },
            {
              id: "12348",
              name: "2024级新生杯",
              area: "篮球场",
              time: "2024-12-03 18:00",
              userList: [
                {
                  name: "张三",
                  id: "1",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
              ],
              refereeList: [
                {
                  name: "裁判1",
                  id: "1",
                },
                {
                  name: "裁判2",
                  id: "2",
                },
              ],
            },
          ],
          trainList: [
            {
              id: "1234",
              name: "2024级新生杯",
              area: "篮球场",
              time: "2024-12-03 18:00",
              content: "魔鬼训练",
            },
            {
              id: "12345",
              name: "2024级新生杯",
              area: "篮球场",
              time: "2024-12-03 18:00",
              content: "",
            },
          ],
        },
        "2024-12-01": {
          raceList: [
            {
              id: "123",
              name: "2024级新生杯",
              area: "篮球场",
              time: "2024-12-03 18:00",
              userList: [
                {
                  name: "张三",
                  id: "1",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
              ],
              refereeList: [
                {
                  name: "裁判1",
                  id: "1",
                },
                {
                  name: "裁判2",
                  id: "2",
                },
              ],
            },
            {
              id: "12348",
              name: "2024级新生杯",
              area: "篮球场",
              time: "2024-12-03 18:00",
              userList: [
                {
                  name: "张三",
                  id: "1",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
              ],
              refereeList: [
                {
                  name: "裁判1",
                  id: "1",
                },
                {
                  name: "裁判2",
                  id: "2",
                },
              ],
            },
          ],
          trainList: [
            {
              id: "1234",
              name: "2024级新生杯",
              area: "篮球场",
              time: "2024-12-03 18:00",
              content: "魔鬼训练",
            },
            {
              id: "12345",
              name: "2024级新生杯",
              area: "篮球场",
              time: "2024-12-03 18:00",
              content: "",
            },
          ],
        },
        "2024-12-09": {
          raceList: [
            {
              id: "123",
              name: "2024级新生杯",
              area: "篮球场",
              time: "2024-12-03 18:00",
              userList: [
                {
                  name: "张三",
                  id: "1",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
              ],
              refereeList: [
                {
                  name: "裁判1",
                  id: "1",
                },
                {
                  name: "裁判2",
                  id: "2",
                },
              ],
            },
            {
              id: "12348",
              name: "2024级新生杯",
              area: "篮球场",
              time: "2024-12-03 18:00",
              userList: [
                {
                  name: "张三",
                  id: "1",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "李三",
                  id: "2",
                  team: "A队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
                {
                  name: "王五",
                  id: "3",
                  team: "B队",
                },
              ],
              refereeList: [
                {
                  name: "裁判1",
                  id: "1",
                },
                {
                  name: "裁判2",
                  id: "2",
                },
              ],
            },
          ],
          trainList: [
            {
              id: "1234",
              name: "2024级新生杯",
              area: "篮球场",
              time: "2024-12-03 18:00",
              content: "魔鬼训练",
            },
            {
              id: "12345",
              name: "2024级新生杯",
              area: "篮球场",
              time: "2024-12-03 18:00",
              content: "",
            },
          ],
        },
      },
    };
  },
  created() {
    this.year = new Date().getFullYear();
    this.month = new Date().getMonth() + 1;
    // this.curInfo = this.dataMap["2024-12-03"];
    this.getDateData()
  },
  mounted() { },
  methods: {
    async getDateData() {
      let data = {
        year: this.year,
        month: this.month
      }
      const res = await getDateMap(data)
      this.dataMap = res.data;
      console.log(res, 'rrr');

    },
    handleDateClick(date, data) {
      console.log(date, data, this.dataMap[data.day]);
      this.curInfo = this.dataMap[data.day];
      if (this.dataMap[data.day]) {
        this.curInfo = this.dataMap[data.day];
        this.dateDialogShow = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.dateManage {
  height: 100%;

  .dateItem {
    // height: 100%;
  }

  .el-calendar {
    height: 100%;
    display: flex;
    flex-direction: column;

    ::v-deep {
      .el-calendar__body {
        flex: 1;

        .el-calendar-table {
          height: 100%;

          .el-calendar-day {
            height: 111px;

            .dateItem {
              height: 100%;
              padding: 5px;
            }

            &:hover {
              background-color: #fce4dd;
            }
          }

          .el-calendar-table__row {
            .current {
              // display: flex;
              // flex-direction: column;
            }

            .is-selected {
              background-color: #fce4dd;

            }
          }
        }
      }
    }
  }

  .has {
    color: #333;
    font-size: 12px;
    // background-color: #fce4dd !important;
    border-radius: 5px;
    display: flex;
    flex-direction: column;

    .date {
      text-align: center;
    }

    .race {
      flex: 1;
      margin-bottom: 5px;
      background-color: #37d471;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      border-radius: 5px;
      /* 控制显示的行数 */
    }

    .train {
      flex: 1;
      background-color: #ffc1b6;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      border-radius: 5px;
      -webkit-line-clamp: 2;
      /* 控制显示的行数 */
    }
  }
}
</style>
